<template>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="login" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45"></span>

                    <!-- 邮箱 -->
                    <div class="wrap-input100 validate-input m-b-10">
                        <van-field v-model="user.email" name="email" placeholder="请输入注册邮箱" left-icon="envelop-o" :rules="rules.email" />
                    </div>

                    <!-- 密码 -->
                    <div class="wrap-input100 validate-input m-b-10">
                        <van-field type="password" v-model="user.password" name="password" placeholder="请输入密码"
                            left-icon="bag-o" :rules="rules.password" />
                    </div>

                    <!-- 提交按钮 -->
                    <div class="container-login100-form-btn p-t-10">
                        <van-button  block type="primary" native-type="submit">
                            登 录
                        </van-button>
                    </div>

                    <div class="text-center w-full p-t-25">
                        <router-link class="txt1" to="/user/base/register">
                            立即注册
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        emits: ['toggle'],
        created() {
            this.$emit('toggle',false)
        },
        data() {
            return {
                user: {
                    email: '',
                    password: ''
                },
                //表单的验证规则
                rules: {
                    email: [{
                            required: true, //必填
                            message: '请输入邮箱',
                        },
                        {
                            message: '请输入正确邮箱地址',
                            validator(value) {
                                //正则表达式
                                var reg = new RegExp(
                                    "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
                                    )

                                return reg.test(value)
                            }
                        },
                    ],
                    password: [{
                        required: true, //必填
                        message: '请输入密码'
                    }]
                }
            }
        },
        methods: {
            //让方法先变成异步
            async login(value){
              
                 //同步的请求
                let result = await this.$api.login(value)

                if(result.code == 1){

                    this.$cookies.set('LoginUser',result.data)

                    this.$store.commit('upuser',result.data)

                    // window.localStorage.setItem('User', JSON.stringify(result.data))

                    this.$store.dispatch('upuser', result.data)

                    this.$notify({
                        type: 'success',
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            this.$router.push(result.url)
                        }
                    })
                    return
                }

            }
        }
    }
</script>
<style>
    @import url('/public/assets/css/login/util.css');
    @import url('/public/assets/css/login/main.css');
</style>